import React,{Component}  from 'react';
import {connect} from 'react-redux';
import {fetchList,fetchGoodsList} from '../actions/home'
var Link=require('react-router').Link;

class Home extends Component{
    componentWillMount(){
        this.props.fetchList();
        this.props.fetchGoodsList();
    }
    render(){
        const {lists,goods,fetchList,fetchGoodsList} = this.props;
        var showData=[];
        var goodsData=[];
        var list=lists.rows;
        var good=goods.rows;
        if(list){
            var rowList = [];
			for (var i = 0; i < 3; i++) {
				var colList = [];
				for (var j = 0; j < 3; j++) {
                    var index= i*3+j;
				 	//加上记录数判断，如果下标索引值小于总的数组长度，则进行列表显示，否则不加入数据
					if(index<3){
                        var imgPath="http://localhost:3000/"+list[index].img.filename;
						colList.push(
							<div key={index} className="col-lg-4" id="news">
                                <div className="thumbnail">
                                    <img className="img-circle" src={imgPath} alt="Generic placeholder image"/>
                                    <div className="caption">
                                        <Link to={ {pathname:'/about/'+list[index]._id}}>
                                            <h4 className="moreTitle">{list[index].title}</h4>
                                        </Link>
                                        <Link to={ {pathname:'/about/'+list[index]._id}}>
                                            <div className="moreContent" dangerouslySetInnerHTML={{__html: list[index].content}}>
                                            </div>
                                        </Link>
                                            <p className="moreComment">
                                                <Link to={ {pathname:'/about/'+list[index]._id}}><i className="glyphicon glyphicon-comment"></i>：{list[index].commentCount}条</Link>
                                                <Link to={ {pathname:'/about/'+list[index]._id}}>详情>></Link>
                                            </p>
                                    </div>
                                </div>
					        </div>
						)
					}
				};
				rowList.push(
					<div className="row" key={i}>{colList}</div>
				)
			};
            showData = rowList;
        }
        if(good){
            var rowList = [];
			for (var i = 0; i < 4; i++) {
				var colList = [];
				for (var j = 0; j < 4; j++) {
                    var index= i*4+j;
			 	 	//加上记录数判断，如果下标索引值小于总的数组长度，则进行列表显示，否则不加入数据
					if(index<4){
                        var imgPath="http://localhost:3000/"+good[index].img[0].filename;
						colList.push(
							<div key={index} className="col-sm-3" id="tjGoods">
                                 <div className="thumbnail">
                                     <img className="img-circle" src={imgPath} alt="Generic placeholder image"/>
                                     <div className="caption">
                                         <div className="moreContent">
                                             {good[index].name}
                                         </div>
                                         <p className="moreComment">
                                            <span className="left">¥:{good[index].price}</span>
                                            <a href="javascript:void(0)" className="right">评价：{good[index].commentCount}条</a>
                                        </p>
                                     </div>
                                 </div>      
			 		        </div>
						)
					}
                };
				rowList.push(
					<div className="row" key={i}>{colList}</div>
				)
			};
            goodsData = rowList;
        }
        return (
            <div id="home">
                {/*轮播图*/}
              
                <div id="carousel-example-generic" className="carousel slide" data-ride="carousel">
                  <ol className="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" className=""></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1" className=""></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2" className=""></li>
                    <li data-target="#carousel-example-generic" data-slide-to="3" className="active"></li>
                  </ol>
                  <div className="carousel-inner" role="listbox">
                    <div className="item">
                      <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide [900x500]" src="src/image/banner01.jpg" data-holder-rendered="true"/>
                    </div>
                    <div className="item">
                      <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide [900x500]" src="src/image/banner02.jpg" data-holder-rendered="true"/>
                    </div>
                    <div className="item">
                      <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide [900x500]" src="src/image/banner03.jpg" data-holder-rendered="true"/>
                    </div>
                    <div className="item active">
                      <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide [900x500]" src="src/image/banner04.jpg" data-holder-rendered="true"/>
                    </div>
                  </div>
                  <a className="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span className="sr-only">Previous</span>
                  </a>
                  <a className="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span className="sr-only">Next</span>
                  </a>
                </div>
                <div className="title">
                    <p>最新新闻</p>
                </div>
                <p className="more"><Link to="/about">更多新闻>></Link></p>
                {/*最新新闻*/}
                {showData}
                <div className="title">
                    <p>猜您喜欢</p>
                </div>
                <p className="more"><Link to="/counter">更多新品>></Link></p>
                {/*推荐商品*/}
                {goodsData}
            </div>
        )
    }
}
const getValue = (state)=>{
    return {
        lists: state.home.lists,
        goods: state.home.goods
    }
}
const HomeShow = connect(getValue,{fetchList,fetchGoodsList})(Home)
module.exports = HomeShow;